<template>
  <view class="bg-[#F6F6F6] min-h-[100vh]" :style="themeColor()">
    <template v-if="!loading">
      <view class="w-full bg-[#F6F6F6]">
        <view class="pb-[210rpx] relative" :style="headerStyle">
          <!-- #ifdef MP-WEIXIN -->
          <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header"/>
          <!-- #endif -->
        </view>
        <view class="sidebar-marign flex flex-col mt-[-178rpx] relative">
          <view class="w-[322rpx] h-[80rpx] leading-[80rpx] text-[26rpx] text-[#333] font-bold box-border pl-[30rpx]"
                :style="{backgroundImage: 'url(' + img('static/resource/images/member/point/top_bg.png') + ') ',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
            个人详情 {{ rebateMember == '' ? '（非VIP）' : '（VIP）' }}
          </view>
          <view class="flex items-center px-[30rpx] rounded-[16rpx] !rounded-tl-none bg-[#fff] h-[173rpx] box-border">
            <view class="w-[196rpx] flex-shrink-0 text-center">
<!--              <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{rebateGroup.rounds||0}}</view>-->
              <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{ rebateGroup.rounds == 0 ? '无上限' : rebateGroup.rounds }}</view>
              <view class="mt-[8rpx] text-[#666] text-[26rpx] leading-[36rpx] font-400">总轮次</view>
            </view>
            <view class="w-[1rpx] h-[50rpx] flex-shrink-0 bg-[#EBEBEB] mx-[10rpx]"></view>
            <view class="w-[196rpx] flex-shrink-0 text-center">

              <button v-if="rebateMember == ''" class="h-[40rpx] !m-0 rounded-[40rpx] text-[26rpx] leading-[40rpx] !text-[#fff] !" shape="circle"
                      :style="{background: 'linear-gradient( 94deg, #FB7939 0%, #FE120E 99%), #EF000C'}" @click="toLink('/addon/jiangsu_shop/pages/rebate/list')">去商城</button>
              <view v-else>
<!--                <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{ rebateMember.cur_rounds||0 }}</view>-->
                <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{ rebateMember.cur_rounds == -1 ? '无' : rebateMember.cur_rounds }}</view>
                <view class="mt-[8rpx] text-[#666] text-[26rpx] leading-[36rpx] font-400">当前轮次</view>
              </view>
            </view>
            <view class="w-[1rpx] h-[50rpx] flex-shrink-0 bg-[#EBEBEB] mx-[10rpx]"></view>
            <view class="w-[196rpx] min-w-[209.33rpx] flex-shrink-0 text-center">
              <view v-if="rebateMember != ''">
<!--                <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{rebateMember.cur_sort||0}}</view>-->
                <view class="text-[#333] text-[42rpx] leading-[59rpx] font-bold">{{ rebateMember.cur_sort == -1 ? '无' : rebateMember.cur_sort }}</view>
                <view class="mt-[8rpx] text-[#666] text-[26rpx] leading-[36rpx] font-400">当前规则序号</view>
              </view>

            </view>
          </view>
        </view>
      </view>
      <view class="mt-[20rpx] sidebar-marign p-[30rpx] pb-[70rpx] box-border rounded-[16rpx] bg-[#fff]">
        <view class="text-[32rpx] leading-[45rpx] font-bold">活动规则</view>
        <view class="mt-[50rpx] flex flex-wrap justify-around">

          <view v-for="(item,index) in rebateGroupData" :key="index" class="w-[200rpx] h-[253rpx] box-border pt-[69rpx] relative text-center"
                :style="{backgroundImage: 'url(' + img('static/resource/images/member/point/activity_1.png') + ') ',
				backgroundSize: '100% 100%',
				backgroundRepeat: 'no-repeat'}">
            <image class="h-[78rpx] w-[78rpx] absolute left-[65rpx] top-[-21rpx]" :src="img('static/resource/images/member/point/activity_icon_1.png')" mode="heightFix" />
            <view class="text-[28rpx] leading-[39rpx] text-[#333]">{{item.title}}</view>
            <view class="mt-[10rpx] text-[24rpx] leading-[34rpx] text-[#999] font-500">返利比例：{{item.prop * 100}}%</view>
            <view v-if="rebateMember.cur_sort == item.sort" class="w-full flex justify-center mt-[20rpx]">
              <button class="h-[40rpx] !m-0 rounded-[40rpx] text-[26rpx] leading-[40rpx] !text-[#fff] !" shape="circle"
                      :style="{background: 'linear-gradient( 94deg, #FB7939 0%, #FE120E 99%), #EF000C'}" @click="toLink('/addon/jiangsu_shop/pages/rebate/list')">去分享</button>
            </view>
          </view>
        </view>
      </view>

    </template>
    <u-loading-page bg-color="rgb(248,248,248)" :loading="loading" loadingText="" fontSize="16" color="#303133"></u-loading-page>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {onLoad, onShow} from '@dcloudio/uni-app'
import { t } from '@/locale'
import {redirect, img, pxToRpx, getToken} from '@/utils/common';
import { getMemberAccountPointcount,getTaskPoint } from '@/app/api/member';
import { topTabar } from '@/utils/topTabbar'
import {getRebateMemberGroup} from "@/addon/jiangsu_shop/api/rebate";

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({title:'我的积分'})
/********* 自定义头部 - end ***********/

// 获取系统状态栏的高度
let menuButtonInfo:any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const headerStyle = computed(()=>{
  return {
    backgroundImage: 'url(' + img('static/resource/images/member/point/mask_group.png') + ') ',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom',
    // paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
  }
})
const topStyle = computed(() => {
  let style = ''
  style = Object.keys(menuButtonInfo).length?(pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) +  38) + 'rpx;':'38rpx'
  return style
})

const toLink=(url='',param={})=>{
  redirect({ url, param })
}


onShow(() => {
  // 判断是否已登录
  if (getToken()) {
    getRebateMemberFn();
    //getMemberLevelFn();
  }
})

const loading = ref(true)
const rebateMember = ref([]) // VIP会员信息
const rebateGroup = ref([]) // 返利规则组信息
const rebateGroupData = ref([]) // 返利规则信息

const getRebateMemberFn = ()=>{

  getRebateMemberGroup().then((res) => {
    rebateMember.value = res.data.member
    rebateGroup.value = res.data.group
    if(rebateGroup.value){
      rebateGroupData.value = JSON.parse(rebateGroup.value.data)
    }
    console.log(rebateMember.value)
    loading.value = false
  }).catch(()=>{
    loading.value = false;
  })
}
</script>

<style lang="scss" scoped>
.bg-color{
  background-color: rgba(102,102,102,0.4);
}
</style>
